<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>活动通告管理</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../static/css/skins.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script type="text/javascript" src="../../static/js/tool.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.all.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/lang/zh-cn/zh-cn.js"></script>
		<style type="text/css">
			/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-dropdown-link {
				cursor: pointer;
				color: #409EFF;
			}

			.el-icon-arrow-down {
				font-size: 12px;
			}

			.el-main {
				padding: 4px;
			}

			.el-icon-search {
				color: #409EFF;
			}

			.el-icon-refresh-right {
				color: #409EFF;
			}

			[v-cloak] {
				display: none;
			}

			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 108px;
				height: 108px;
				line-height: 108px;
				text-align: center;
			}

			.avatar {
				width: 108px;
				height: 108px;
				display: block;
			}

			.grid {
				border: 1px #ffaaaf;
			}
		</style>
	</head>

	<body>
		<el-container id="app" v-cloak>
			<el-main>
				<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
					size="mini" style="height: 35px" @submit.native.prevent>
					<el-form-item label="活动主题">
						<el-input v-model="queryData.theme" clearable placeholder="请输入活动主题"></el-input>
					</el-form-item>
					<el-form-item label="活动内容">
						<el-input v-model="queryData.content" clearable placeholder="请输入活动内容"></el-input>
					</el-form-item>
					<el-form-item label="活动举办方">
						<el-input v-model="queryData.organizer" clearable placeholder="请输入活动举办方"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
						<el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
					</el-form-item>
				</el-form>

				<vxe-grid border ref="xGrid" @page-change="handlePageChange" resizable show-overflow
					highlight-current-row="true" keep-source :height="tableHeight" size="mini"
					:checkbox-config="tableRadio" :pager-config="tablePage" :data="tableData"
					:header-cell-style="{'text-align':'center'}" :loading="dataLoading" :toolbar="tableToolbar"
					:export-config="tableExport" @cell-dblclick="cellDBLClickEvent"
					:edit-config="{trigger:'click', mode:'row'}" @toolbar-button-click="toolbarButtonClickEvent"
					:sort-config="{remot:true}" @sort-change="tableSortChange">
					<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
					<vxe-table-column field="id" title="序号" width="60" align="center">
					</vxe-table-column>
					<vxe-table-column field="theme" title="活动主题" align="left">
					</vxe-table-column>
					<vxe-table-column field="content" title="活动内容" align="left">
					</vxe-table-column>
					<vxe-table-column field="phone" title="联系电话" align="center">
					</vxe-table-column>
					<vxe-table-column field="contacts" title="联系人" align="center">
					</vxe-table-column>
					<vxe-table-column field="startTime" title="活动开始时间" width="100" align="center"
						:formatter="formatDate">
					</vxe-table-column>
					<vxe-table-column field="endTime" title="活动结束时间" width="100" align="center" :formatter="formatDate">
					</vxe-table-column>
					<vxe-table-column field="address" title="活动地址" align="left">
					</vxe-table-column>
					<vxe-table-column field="signUpDeadline" title="报名截止时间" width="100" align="center"
						:formatter="formatDate">
					</vxe-table-column>
					<vxe-table-column field="signUpRequirements" title="报名要求" align="left">
					</vxe-table-column>
					<vxe-table-column field="organizer" title="活动举办方" align="center">
					</vxe-table-column>
					<vxe-table-column field="signUpCount" title="已报名人数" align="right" sortable='custom' width="100">
						<template #default="{ row }">
							<a target="_black" :href="row.signUpCount"
								@click.stop.prevent="goBMModel(row)">{{row.signUpCount}}</a>
							/{{row.peopleNum}}
						</template>
					</vxe-table-column>
					<vxe-table-column field="atts" title="附件" align="center">
						<template #default="{ row }">
							<a v-for="(item,index) in row.atts" :href="item.dldLink" v-if="item.dldLink"
								target="_black"><span v-if="index != 0">, </span>附件{{ index+1 }}</a>
						</template>
					</vxe-table-column>
					<vxe-table-column field="cuser" title="创建人" align="center">
					</vxe-table-column>
					<vxe-table-column field="cTime" title="创建时间" align="center" :formatter="formatDate">
					</vxe-table-column>
				</vxe-grid>

				<vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800" resize
					id="formWindow">
					<el-form :model="formData" :rules="formRules" ref="formData" label-width="120px"
						label-position="right" size="mini" v-loading="submitLoading">
						<template v-if="visible===true">
							<el-form-item label="ID" prop="id">
								<el-input v-model="formData.id"></el-input>
							</el-form-item>
						</template>
						<el-form-item label="活动主题" prop="theme">
							<el-input type="text" v-model="formData.theme" placeholder="请填写活动主题" maxlength="100"
								show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="活动内容" prop="content">
							<div id="contentEditor" v-model="formData.content"></div>
						</el-form-item>
						<el-form-item label="活动地址" prop="address">
							<el-input type="text" v-model="formData.address" placeholder="请输入活动地址" maxlength="200"
								show-word-limit>
							</el-input>
						</el-form-item>
						<el-row>
							<el-col :span="12">
								<el-form-item label="联系人" prop="contacts">
									<el-input type="text" v-model="formData.contacts" placeholder="请输入联系人"
										show-word-limit>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="联系电话" prop="phone">
									<el-input type="number" v-model="formData.phone" placeholder="请输入联系电话"
										maxlength="11" show-word-limit></el-input>
								</el-form-item>
							</el-col>

						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="活动起止时间" prop="startTime">
									<el-date-picker style="width:100%;" v-model="formData.value1" type="datetimerange"
										:picker-options="pickerOptions" @change="datePickerChange"
										value-format='yyyy-MM-dd HH:mm:ss' range-separator="至" start-placeholder="开始时间"
										end-placeholder="结束时间" align="right" :default-time="['08:00:00', '23:00:00']">
									</el-date-picker>
								</el-form-item>
							</el-col>

						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="报名截止时间" prop="signUpDeadline">
									<el-date-picker v-model="formData.signUpDeadline" placeholder="请选择时间" @change="datePickerChange1"
										type="datetime" style="width:100%"
										value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="参与人数" required>
									<el-input-number v-model="formData.peopleNum" style="width:100%" placeholder="0">
									</el-input-number>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="报名要求" prop="signUpRequirements">
							<el-input type="text" v-model="formData.signUpRequirements" placeholder="请输入报名要求" maxlength="500"
								show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="活动举办方" prop="organizer">
							<el-input type="text" v-model="formData.organizer" placeholder="请输入活动举办方" maxlength="100"
								show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="封面" prop="atts">
							<el-upload class="avatar-uploader" :action="this.uploadUrl" :on-success="handleSuccess"
								:show-file-list="false" :before-upload="beforeUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
						<el-form-item label="附件" prop="annex">
							<el-upload class="upload-demo" :action="this.uploadUrl" :on-change="fileListChange1"
								:on-remove="fileListRemove1" multiple :file-list="this.fileList1">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item  style="text-align: right;">
							<el-button type="primary" :loading="submitLoading" icon="el-icon-folder"
								@click="submitEvent('formData')" :disabled="disabled" v-cloak>保存</el-button>
							<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')" v-cloak>
								重置
							</el-button>
							<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')" v-cloak>
								退出
							</el-button>
						</el-form-item>
					</el-form>
					 
				</vxe-modal>

				<el-dialog :visible.sync="isBMModel" width="95%" top="1vh" destroy-on-close title="人员分工">
					<div style="display:flex;">
						<div style="width:50%">
							<span>报名列表</span>
							<vxe-grid ref="xGridbm" border resizable show-overflow keep-source :height="tableHeight"
								size="mini" :pager-config="tablePageBM" :data="SignUpData"
								:header-cell-style="{'text-align':'center'}" :loading="bmListLoading"
								:edit-config="{trigger:'click', mode:'row'}" @page-change="handlePageChangeBM">
								<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
								<vxe-table-column field="userId" title="报名工号" align="center" width="120">
								</vxe-table-column>
								<vxe-table-column field="userName" title="报名人" align="center" width="100">
								</vxe-table-column>
								<vxe-table-column field="sex" title="性别" align="center" width="60">
								</vxe-table-column>
								<vxe-table-column field="age" title="年龄" align="center" width="60">
								</vxe-table-column>
								<vxe-table-column field="unit" title="单位" align="center" width="160">
								</vxe-table-column>
								<vxe-table-column title="操作" align="center" width="150">
									<template #default="{ row , column}">
										<vxe-button type="text" icon="fa fa-edit vxe-primary-color"
											@click="goADModel(row)" title="分工">分工</vxe-button>
									</template>
								</vxe-table-column>
							</vxe-grid>
						</div>
						<div style="margin-left:10px;width:50%">
							<span>已分工列表</span>
							<vxe-grid ref="xGridfg" border resizable show-overflow keep-source :height="tableHeight"
								:pager-config="tablePageFG" size="mini" :data="fenGongRecord"
								:header-cell-style="{'text-align':'center'}" :loading="bmListLoading"
								:edit-config="{trigger:'click', mode:'row'}" @page-change="handlePageChangeFG">
								<vxe-table-column field="id" title="ID" width="60" align="center">
								</vxe-table-column>
								<vxe-table-column field="volunteerUserCode" title="报名工号" width="120" align="center">
								</vxe-table-column>
								<vxe-table-column field="volunteerUserName" title="报名人" align="center" width="100">
								</vxe-table-column>
								<vxe-table-column field="division" title="分工内容" align="left" width="250">
								</vxe-table-column>
								<vxe-table-column title="操作" align="center" width="190">
									<template #default="{ row , column}">
										<vxe-button @click="editFenGong(row)" type="text"
											icon="fa fa-edit vxe-primary-color" title="修改">修改
										</vxe-button>
										<vxe-button @click="deleteForm(row)" type="text"
											icon="fa fa-trash-o vxe-danger-color" title="删除">删除
										</vxe-button>
									</template>
								</vxe-table-column>
							</vxe-grid>
						</div>

					</div>

				</el-dialog>

				<el-dialog :visible.sync="isADModel" title="设置分工" width="1000" height="600" resize
					style="overflow-y: scroll;" destroy-on-close @close="closeForm('fengongForm')">
					<el-form :model="fengongForm" ref="fengongForm" label-width="100px" class="demo-fengongForm"
						size="mini" v-loading="submitLoading">
						<el-form-item label="志愿者工号" prop="volunteerUserCode" width="500">
							<el-input :disabled="true" v-model="fengongForm.volunteerUserCode"></el-input>
						</el-form-item>
						<el-form-item label="志愿者姓名" prop="volunteerUserName" width="500">
							<el-input :disabled="true" v-model="fengongForm.volunteerUserName"></el-input>
						</el-form-item>
						<el-form-item label="分工内容" prop="division" width="500">
							<el-input v-model="fengongForm.division"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button v-if="fenGongFlag=='save'" type="primary" @click="submitForm()">保存</el-button>
							<el-button v-else type="success" @click="editForm()">修改</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
			</el-main>
		</el-container>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var main = {
				data() {
					return {
						//排序
						prop: '',
						order: '',
						dataLoading: false,
						loading: false,
						disabled: false,
						visible: false,
						tableHeight: '100%',
						departOptions: [],
						tableData: [],
						contentEditor: null,
						uploadUrl: "",
						fileList: [],
						fileList1: [],
						imageUrl: '',
						tablePage: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 20,
							align: 'left',
							pageSizes: [30, 50, 100, 200],
							layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
								'Total'
							],
						},
						tablePageBM: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 20,
							align: 'left',
							pageSizes: [30, 50, 100, 200],
							layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
								'Total'
							],
						},
						tablePageFG: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 20,
							align: 'left',
							pageSizes: [30, 50, 100, 200],
							layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
								'Total'
							],
						},
						tableToolbar: {
							id: 'toolbar',
							size: 'mini',
							perfect: true,
							buttons: [],
						},
						tableExport: {
							filename: 'export',
							sheetName: 'Sheet1',
							type: 'xlsx',
							// 自定义类型
							types: ['xlsx', 'csv', 'html', 'xml', 'txt']
						},
						tableRadio: {
							trigger: 'row',
							highlight: true
						},
						submitLoading: false,
						selectRow: null,
						showEdit: false,
						queryData: {
							theme: "",
							content: "",
							organizer: ""
						},
						formData: {
							id: "",
							theme: "",
							content: "",
							phone: "",
							peopleNum: 1,
							startTime: "",
							endTime: "",
							address: "",
							signUpDeadline: "",
							signUpRequirements: "",
							organizer: "",
							dataType: "",
							atts: [],
							annex: [],
							contacts: '',
							value1: ['','']
						},
						formRules: {
							theme: [{
									required: true,
									message: '请输入活动主题'
								},
								{
									min: 1,
									max: 100,
									message: '长度在1到100个字符'
								}
							],
							content: [{
								required: true,
								message: '活动内容不能为空',
								trigger: 'blur'
							}],
							phone: [{
								required: true,
								min: 11,
								max: 11,
								message: '请输入联系电话'
							}],
							address: [{
								required: true,
								message: '活动地址不能为空'
							}],
							contacts: [{
								required: true,
								message: '联系人不能为空',
								trigger: 'blur'
							}],
							startTime: [{
								required: true,
								message: '活动起止时间不能为空'
							}],
							endTime: [{
								required: true,
								message: '结束时间不能为空'
							}],
							signUpDeadline: [{
								required: true,
								message: '截止时间不能为空'
							}],
							organizer: [{
								required: true,
								message: '活动组织不能为空'
							}],
							atts: [{
								required: true,
								message: '封面不能为空'
							}],
							peopleNum: [{
								required: true,
								message: '参与人数不能为0',
								min: 1,
								trigger: 'blur'
							}]
						},
						isBMModel: false,
						SignUpData: [],
						isADModel: false,
						fengongForm: {
							id: '',
							activityId: '',
							division: '',
							volunteerUserCode: '',
							volunteerUserName: ''
						},
						activityId: '',
						bmListLoading: false,
						fenGongRecord: [],
						fenGongFlag: 'save',
						pickerOptions: {
							shortcuts: [{
								text: '最近一周',
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
									picker.$emit('pick', [start, end]);
								}
							}, {
								text: '最近一个月',
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
									picker.$emit('pick', [start, end]);
								}
							}, {
								text: '最近三个月',
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
									picker.$emit('pick', [start, end]);
								}
							}]
						},
						
					}
				},
				created() {
					this.findList();
					this.getBtn();
					this.uploadUrl = window.curl + '/attach/uploadAtt';
					UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
					UE.Editor.prototype.getActionUrl = function(action) {
						if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
							let path = window.curl + '/attach/uploadUeditorAtt';
							return path; //调用后台接口上传图片   
						} else {
							return this._bkGetActionUrl.call(this, action);
						}
					}
					this.contentEditor = UE.getEditor('contentEditor', {
						initialFrameWidth: '95%',
						initialFrameHeight: 250,
						elementPathEnabled: false, //删除元素路径
						pasteplain: true,
						/* 纯文本粘贴 */
						autoHeightEnabled: true,
						/* 启用右侧滚轮,默认是true自动长高模式*/
						autoFloatEnabled: true
					});

				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
				},
				methods: {
					validTime() {
						if (this.formData.signUpDeadline && this.formData.startTime) {
							let minDate = new Date(this.formData.signUpDeadline); //报名截止时间
							let maxDate = new Date(this.formData.startTime); //课程开始时间
							if (minDate.getTime() >= maxDate.getTime()) {
								this.$message({
									message: "报名截止时间应早于活动开始时间",
									type: 'warning',
									center: true
								});
								return true;
							}
						}
						return false;
					},
					datePickerChange1(e){
						console.log(e)
						this.validTime();
					},
					datePickerChange(e) {
						this.formData.startTime = e[0]
						this.formData.endTime = e[1]
						this.validTime();
					},
					goADModel(row) {
						let that = this;
						this.fenGongFlag = 'save';
						this.isADModel = true
						this.fengongForm.id = row.id
						this.fengongForm.activityId = this.activityId
						this.fengongForm.volunteerUserCode = row.userId
						this.fengongForm.volunteerUserName = row.userName
						this.fengongForm.division = row.division
					},
					editFenGong(row) {
						let that = this;
						this.fenGongFlag = 'update';
						this.isADModel = true;
						this.fengongForm.id = row.id;
						this.fengongForm.activityId = this.activityId;
						this.fengongForm.volunteerUserCode = row.volunteerUserCode;
						this.fengongForm.volunteerUserName = row.volunteerUserName;
						this.fengongForm.division = row.division
					},
					goBMModel(row) {
						if (row.signUpCount > 0) {
							this.activityId = row.id
							let that = this;
							this.isBMModel = true;
							this.getVolunteerByActivity(this.activityId = row.id);
						} else {
							this.$message({
								message: "当前活动暂无报名!",
								type: 'warning',
								center: true
							});
						}
					},
					submitForm() {
						let that = this
						let obj = {
							activityId: this.activityId,
							division: this.fengongForm.division,
							volunteerUserCode: this.fengongForm.volunteerUserCode,
							volunteerUserName: this.fengongForm.volunteerUserName,
						}
						this.submitLoading = true;
						webApi('/articleDivision/addActivityDivision', 'post', obj, function(data) {
							that.submitLoading = false;
							if (data.code == 200) {
								that.$message({
									message: "设置分工成功!",
									type: 'success',
									center: true
								});
								that.isADModel = false;
								that.getActivityDivisionList(obj.activityId)
							} else {
								that.$message({
									message: "设置分工失败!",
									type: 'error',
									center: true
								});
							}
						}, function(xhr, type, errorThrown) {
							that.submitLoading = true;
						})
					},

					//TODO: 没有拿到ID
					editForm() {
						let that = this
						let obj = {
							id: this.fengongForm.id,
							activityId: this.activityId,
							division: this.fengongForm.division,
							volunteerUserCode: this.fengongForm.volunteerUserCode,
							volunteerUserName: this.fengongForm.volunteerUserName,
						}
						that.submitLoading = true;
						webApi('/articleDivision/editActivityDivision', 'post', obj, function(data) {
							that.submitLoading = false;
							if (data.code == 200) {
								that.$message({
									message: "设置分工成功!",
									type: 'success',
									center: true
								});
								that.isADModel = false;
								that.getActivityDivisionList(obj.id)
							} else {
								that.$message({
									message: "设置分工失败!",
									type: 'error',
									center: true
								});
							}
						}, function(xhr, type, errorThrown) {
							that.submitLoading = false;
						})
					},
					//TDOD: 没有拿到ID
					deleteForm(fengongForm) {
						let that = this
						this.$confirm('确认要删除这条信息吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							let obj = {
								id: fengongForm.id,
								activityId: this.activityId,
								division: fengongForm.division,
								volunteerUserCode: fengongForm.volunteerUserCode,
								volunteerUserName: fengongForm.volunteerUserName,
							}
							webApi('/articleDivision/removeActivityDivision', 'post', obj, function(data) {
								if (data.code == 200) {
									that.$message({
										message: "删除成功!",
										type: 'success',
										center: true
									});
									that.getActivityDivisionList(obj.activityId)
								} else {
									that.$message({
										message: "删除失败!",
										type: 'error',
										center: true
									});
								}
							}, function(xhr, type, errorThrown) {})
						})

					},
					closeForm(formName) {
						this.isADModel = false;
						this.$refs[formName].resetFields();
					},
					searchEvent() {
						this.findList();
					},
					searchEventA() {
						this.queryData.theme = "";
						this.queryData.content = "";
						this.queryData.organizer = "";
						this.findList();
					},
					getTreeData(data) {
						for (let i = 0; i < data.length; i++) {
							if (data[i].children.length < 1) {
								// children若为空数组，则将children设为undefined
								data[i].children = undefined;
							} else {
								// children若不为空数组，则继续 递归调用 本方法
								this.getTreeData(data[i].children);
							}
						}
						return data;
					},
					getBtn() {
						this.tableToolbar.buttons = []
						let bts = Tool.getButton()
						let btns = []
						this.tableToolbar.buttons = btns.concat(bts)
					},
					//分页
					handlePageChange({
						currentPage,
						pageSize
					}) {
						this.tablePage.currentPage = currentPage
						this.tablePage.pageSize = pageSize
						this.findList()
					},
					handlePageChangeBM({
						currentPage,
						pageSize
					}) {
						this.tablePageBM.currentPage = currentPage
						this.tablePageBM.pageSize = pageSize
						this.getVolunteerByActivity(this.activityId)
					},
					handlePageChangeFG({
						currentPage,
						pageSize
					}) {
						this.tablePageFG.currentPage = currentPage
						this.tablePageFG.pageSize = pageSize
						this.getActivityDivisionList(this.activityId)
					},
					findList() {
						let queryParams = Object.assign({
							page: this.tablePage.currentPage,
							rows: this.tablePage.pageSize,
							theme: this.queryData.theme,
							content: this.queryData.content,
							organizer: this.queryData.organizer
						});
						this.dataLoading = true;
						var object = this;
						webApi("/act/getActivityNotList", "post", queryParams, function(data) {
							object.tableData = data.data.list;
							object.tablePage.total = data.data.total
							object.dataLoading = false;
							// object.getDepartOptions();
						}, function(data) {
							object.tableData = [];
							object.tablePage.total = 0
							object.dataLoading = false;
						});
					},
					getDepartOptions() {
						let that = this;
						webApi('/org/getOrgOptions', 'post', {}, function(data) {
							that.departOptions = that.getTreeData(data.data);
						}, function(xhr, type, errorThrown) {})
					},
					searchEvent(formName, acType) {
						if (acType == 0) {
							this.queryData.theme = "";
							this.queryData.content = "";
							this.queryData.organizer = "";
						}
						this.tablePage.currentPage = 1
						this.findList()
					},
					formatDate({
						cellValue
					}) {
						return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
					},
					toolbarButtonClickEvent({
						code
					}, event) {
						switch (code) {
							case 'reset':
								this.searchEvent(this.queryData, 0)
								break;
							case 'search':
								this.searchEvent(this.queryData, 1)
								break;
							case 'btnInsert':
								var row = this.$refs.xGrid.getCheckboxRecords();
								if (row) {
									var parentCode = row.parentMenuId;
								} else {
									var parentCode = "";
								}
								this.insertEvent(parentCode);
								break;
							case 'btnUpdate':
								if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
									let row = this.$refs.xGrid.getCheckboxRecords()
									this.editEvent(row[0]);
								} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
									this.$message({
										message: "数据大于一条，无法修改",
										type: 'warning',
										center: true
									});
								} else {
									this.$message({
										message: "请选择一行数据",
										type: 'warning',
										center: true
									});
								}
								break;
							case 'btnDelete':
								var row = this.$refs.xGrid.getCheckboxRecords();
								if (row.length > 0) {
									this.removeEvent(row);
								} else {
									this.$message({
										message: "请选择需要删除的数据行",
										type: 'warning',
										center: true
									});
								}
								break;
							case 'btnExport':
								this.$refs.xGrid.exportData({
									filename: '菜单列表',
									sheetName: 'Sheet1',
									type: 'xlsx'
								});
								break;
						}
					},
					nameSelected(value) {
						if (value) {
							this.formData.name = this.$refs.companyNameCas.getCheckedNodes()[0].label;
						}
					},
					insertEvent() {
						this.formData = {
							id: "",
							theme: "",
							content: "",
							phone: "",
							peopleNum: 1,
							startTime: "",
							endTime: "",
							address: "",
							signUpDeadline: "",
							signUpRequirements: "",
							organizer: "",
							dataType: "",
							atts: [],
							annex: [],
							value1:['','']
						};
						this.imageUrl = '';
						this.contentEditor.setContent("");
						this.selectRow = null;
						this.showEdit = true;
					},
					submitEvent(formName) {
						this.formData.content = UE.getEditor('contentEditor').getContent()
						this.$refs[formName].validate((valid) => {
							if (valid) {
								if (this.formData.content == '') {
									this.$message({
										message: '活动内容不能为空',
										type: 'warning',
										center: true
									});
									return;
								}
								this.submitLoading = true;
								this.disabled = true;
								let params = Object.assign(this.formData);
								let that = this;
								webApi('/act/saveData', 'post', params, function(data) {
									that.submitLoading = false;
									if (data.code === 200) {

										that.$message({
											message: '操作成功',
											type: 'success',
											center: true
										});
										that.showEdit = false;
										that.findList();
									} else {
										that.$message({
											message: '操作失败',
											type: 'error',
											center: true
										});
									}
									that.disabled = false;
									that.fileList = [];
									that.fileList1 = [];
								}, function(xhr, type, errorThrown) {
									that.submitLoading = false;
									that.disabled = false;
								});

							}
						});
					},
					resetEvent(formName) {
						this.formData = {
							theme: "",
							content: "",
							phone: "",
							peopleNum: "",
							startTime: "",
							endTime: "",
							address: "",
							signUpDeadline: "",
							signUpRequirements: "",
							organizer: "",
							dataType: "",
							atts: [],
							annex: [],
							value1:['','']
						};
						this.imageUrl = '';
						this.contentEditor.setContent("");
						this.$refs[formName].resetFields();
					},
					closeEvent(formName) {
						this.$refs[formName].resetFields();
						this.showEdit = false;
					},
					editEvent(row) {
						this.formData = {
							id: row.id,
							theme: row.theme,
							content: row.content,
							phone: row.phone,
							peopleNum: row.peopleNum,
							startTime: row.startTime,
							endTime: row.endTime,
							address: row.address,
							signUpDeadline: row.signUpDeadline,
							signUpRequirements: row.signUpRequirements,
							organizer: row.organizer,
							dataType: row.dataType,
							atts: row.atts,
							annex: row.annex,
							contacts: row.contacts,
							value1:[row.startTime,row.endTime]
						};
						
						if (row.atts.length > 0) {
							this.imageUrl = row.atts[0].dldLink;
						} else {
							this.imageUrl = '';
						}
						this.fileList = []
						row.atts.forEach(element => {
							let fileData = {
								name: element.attName,
								attName: element.dldLink,
								response: {
									data: {
										original: element.attName,
										title: element.attName,
										url: element.dldLink,
										viewUrl: element.attPath
									}
								}
							}
							this.fileList.push(fileData);
						});
						this.fileList1 = []
						row.annex.forEach(element => {
							let fileData = {
								name: element.attName,
								attName: element.dldLink,
								response: {
									data: {
										original: element.attName,
										title: element.attName,
										url: element.dldLink,
										viewUrl: element.attPath
									}
								}
							}
							this.fileList1.push(fileData);
						});
						this.contentEditor.setContent(this.formData.content);
						this.selectRow = row;
						this.showEdit = true;

					},
					removeEvent(row) {
						this.$XModal.confirm('您确定要删除该数据?').then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let that = this
								let ids = ""
								row.forEach(item => {
									ids += item.id + ","
								});
								ids = ids.substring(0, ids.length - 1);
								let params = Object.assign({
									id: ids
								});
								webApi('/act/delActivityNot', 'get', params, function(data) {
									that.submitLoading = false;
									if (data.code == 200) {
										that.findList()
										that.$message({
											message: data.msg,
											type: 'success',
											center: true
										});
										that.showEdit = false;
									} else {
										that.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									}
									that.disabled = false;
								}, function(xhr, type, errorThrown) {
									that.submitLoading = false;
								});

							}
						});
					},
					handleSuccess(res, file) {
						this.formData.atts = [];
						if (res.code == 200) {
							this.imageUrl = URL.createObjectURL(file.raw);
							let fileData = {
								size: file.size,
								uid: file.uid,
								attName: file.response.data.original,
								attPath: file.response.data.viewUrl,
								dldLink: file.response.data.url
							}
							this.formData.atts.push(fileData);
						}


					},
					fileListChange1(file, fileList) {
						if (file.response != null) {
							let fileData = {
								size: file.size,
								uid: file.uid,
								attName: file.response.data.original,
								attPath: file.response.data.viewUrl,
								dldLink: file.response.data.url
							}
							this.formData.annex.push(fileData);
						}
					},
					beforeUpload(file, fileList) {
						const isJPG = file.type === 'image/jpeg';
						const isPNG = file.type === 'image/png';
						const isLt2M = file.size / 1024 / 1024 < 3;

						if (!isJPG && !isPNG) {
							this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
						}
						if (!isLt2M) {
							this.$message.error('上传头像图片大小不能超过 3MB!');
						}
						return (isJPG || isPNG) && isLt2M;


					},
					fileListRemove1(file, fileList) {

						for (let i = 0; i < this.formData.annex.length; i++) {
							if (file.response.data.viewUrl == this.formData.annex[i].attPath) {
								this.formData.annex.splice(i, 1);
							}
						}
					},
					cellDBLClickEvent({
						row
					}) {
						this.editEvent(row);
					},
					checkColumnMethod({
						column
					}) {
						if (['companyNo', 'name'].includes(column.property)) {
							return false
						}
						return true
					},
					//表头列排序
					tableSortChange(column, prop, order) {
						//点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据

						this.order = column.order;
						this.prop = column.prop;
						this.findList();
					},
					//根据活动获取报名志愿者
					getVolunteerByActivity(id) {

						this.bmListLoading = true;

						let params = {
							id: id,
							page: this.tablePageBM.currentPage,
							rows: this.tablePageBM.pageSize
						};

						webApi("/articleDivision/getVolunteerByActivity", "get", params, su => {
							this.bmListLoading = false;
							if (su.code == 200) {
								this.SignUpData = su.data.list;
								this.tablePageBM.total = su.data.total;
							}

						}, err => {
							this.bmListLoading = false;
						});
						this.getActivityDivisionList(id)
					},
					//已分工列表
					getActivityDivisionList(id) {
						webApi("/articleDivision/getActivityDivisionPage", "POST", {
							id,
							page: this.tablePageFG.currentPage,
							rows: this.tablePageFG.pageSize
						}, su => {
							// this.bmListLoading = false; 
							if (su.code == 200) {
								this.fenGongRecord = su.data.list
								this.tablePageFG.total = su.data.total;
							}


						}, err => {
							this.bmListLoading = false;
						});
					}

				}
			};

			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>

</html>